//事件委派
let static = document.getElementById('static');
//let pop = document.getElementById('J_mobile_pop');
static.addEventListener('mouseenter',function(){
    static.className = 'dt mobile mobile_on'
})
static.addEventListener('mouseleave',function(){
    static.className = 'dt mobile'
})

let text = document.getElementById('text');
// text.addEventListener('click',function(){
//     text.placeholder = 'dddd';
// })

let cate_menu = document.getElementById('cate_menu');
let cate_pop = document.querySelectorAll('#pop');
let cate_menu_lk = document.querySelector('.cate_menu_lk');
let s = document.querySelector('.cate_menu_item');
let d = document.querySelector('.cate_pop')
let dd = document.querySelector('.grid_c1');
// console.log(s)
// s.addEventListener('mouseover',function(e){
//     for(let i = 0; i < cate_pop.length ; i++){
//         //先将所有不可见
//         cate_pop[i].style.display = 'none';
//     }
//     for(let i = 0; i < cate_pop.length ; i++){
//         if(cate_pop[i].dataset.index === e.target.parentNode.dataset.index){
//             cate_pop[i].style.display = 'block';
//         }else continue;
//     }
// })   

// 不理解  为什么 a没有触发
let ss = document.querySelector('.JS_popCtn')
// cate_menu.addEventListener('mouseover',function(e){
//     ss.style.display = 'block'
//     for(let i = 0; i < cate_pop.length ; i++){
//         //先将所有不可见
//         cate_pop[i].style.display = 'none';
//     }
//     for(let i = 0; i < cate_pop.length ; i++){
//         if(cate_pop[i].dataset.index === e.target.dataset.index){
//             cate_pop[i].style.display = 'block';
//         }else continue;
//     }
// })

cate_menu.addEventListener('mouseover',function(e){
    //console.log(e)
    ss.style.display = 'block'
    for(let i = 0; i < cate_pop.length ; i++){
        //先将所有不可见
        cate_pop[i].style.display = 'none';
    }
    for(let i = 0; i < cate_pop.length ; i++){
        if(cate_pop[i].dataset.index === e.target.dataset.index){
            cate_pop[i].style.display = 'block';
        }else continue;
    }
})
//mouseleave 在从父元素到子元素中不触发  但是mouseover会触发！！！
dd.addEventListener('mouseleave',function(){
    ss.style.display = 'none'
    for(let i = 0; i < cate_pop.length ; i++){
        //先将所有不可见
        cate_pop[i].style.display = 'none';
    }
})


//轮播图
/*心得：
                滑动轮播图，怎么滑动？-> 就是改变left的值
                一共分为：1.点击左右按钮切换图片 
                 2.点击小圆圈可以切换想要的图片小圆圈样式改变 3.点击左右按钮切换图片小圆圈按钮也变 
                 4.自动轮播并且小圆圈的css样式改变
                 第一步：1.点击左右按钮切换图片---右按钮
                    利用index 来修改left值，当index==5时，此时要进行一个魔法：
                    先克隆第一张图片 $img.firstElementChild.cloneNode()  加到最后一张图片后面
                    然后设定一个延时器，先瞬间移动到第一张图片（css样式），此时会发现，后面的缓冲时间500ms消失了
                    需要加上原来的变化
                    ---左按钮大致同上 只是当移动到第一张图片时，先快速移动到新添加的那张图片处，然后恢复原来的缓冲

                第二步：点击小圆圈可以切换想要的图片小圆圈样式改变
                1.先得到小圆圈的所有对象，编写返回当前索引函数  遍历小圆圈所有对象，如果相等了，找到点击的下标
                将index=当前下标 ，瞬间移动到该图片处  然后去掉所有小圆圈的class状态，将当前的index加上class状态

                第三步：3.点击左右按钮切换图片小圆圈按钮也变 
                1.编写修改小圆圈状态【先遍历如果i=index将当前的index加上class状态，否则去掉所有小圆圈的class状态】函数
                2.然后将该函数添加到点击左右按钮切换图片的函数中

                第四步：自动轮播并且小圆圈的css样式改变
                自动轮播 == 点击右按钮，去掉点击事件，里面的操作就是自动轮播

                补充：鼠标移上去清除定时器，鼠标移出来启动定时器
                优化：防止高频点击左右按钮造成出bug，采取节流方式控制【意思为：隔多少时间才执行一次】
        */
let timer = null
let index = 0
let next = document.querySelector('.next')
let prev = document.querySelector('.prev')
let list = document.querySelector('.slider_wrapper')
let $a = document.querySelector('.a');
let $b  = document.querySelector('.sliderBannerWrapper');
let clone1 = $a.firstElementChild.cloneNode()
//图片节点
let clone = list.firstElementChild.cloneNode()
clone.appendChild(clone1);
//把第一个节点添加到末尾
list.appendChild(clone)

//自动轮播
timer = setInterval(auto,2000);
function auto(){
    getRight()
}

//向右移函数
let flag = true;
function getRight(){
    //设置节流锁  防止用户恶意高速点击
    if(!flag) return;
    index++;
    list.style.left = index * -590 + 'px';
    //console.log(index)
    if(index === 8){
        index = 0;
        setTimeout(function(){  //延迟器
            list.style.left = '0px'
            list.style.transition = 'none' 
        },500)
        setCircle();
    }else {
        //加上变化
        list.style.transition = '0.5s ease'
        setCircle()
    }
    flag = false;
    //设置1秒点一次
    setTimeout(() => {
        flag = true
    },1000)
}
// 右按钮 点击
next.addEventListener('click',function(){
    getRight()
})
//左按钮 点击
prev.addEventListener('click',function(){
    if(!flag) return
    index--;
    if(index === -1){
        list.style.left = 8 * -590 + 'px'
        list.style.transition = 'none' 
        index = 7
        setTimeout(function(){
            list.style.left = index * -590 +'px'
            list.style.transition = '0.5s ease'
        },0)
        setCircle()
    }
    //正常左移
    else {
        list.style.left = index * -590 +'px'
        setCircle()
    }
    flag = false;
    //设置1秒点一次
    setTimeout(() => {
        flag = true
    },1000)
})

//鼠标移入时暂停轮播
$b.addEventListener('mouseover',() => {
    clearInterval(timer);
})
//鼠标移出时恢复轮播
$b.addEventListener('mouseout',() => {
    timer = setInterval(auto,2000);
})

//移到小圆点上就切换对应的图片
let btn = document.querySelector('.slider_indicators')
let length = btn.children.length

for(let i = 0 ; i < length ; i++){
    btn.children[i].onmouseover = function(){
        index = searchIndex(this);
        list.style.left = index * -590 + 'px';
        list.style.transition = 'none' ;
        for(let j=0;j<length;j++){
            btn.children[j].className = 'slider_indicators_btn'
        }
        this.className = 'slider_indicators_btn new';
    }
}
//寻找index
function searchIndex(e){
    let num;
    for(let i = 0;i < length ;i++){
        if(btn.children[i] === e){
            num = i;
            break;
        }
    }
    return num;
} 
//设置小圆点样式
function setCircle(){
    for(let i = 0 ;i < length; i++){
        if(i === index){
            btn.children[i].className = 'slider_indicators_btn new';
        }else {
            //不能用this this指向该函数
            btn.children[i].className = 'slider_indicators_btn';
        }
    }
}

// btn.addEventListener('mouseover',function(e){
//     let num;
//     for(let i = 0 ;i < length ; i++){
//         if(btn.children[i] === e.target){
//             num = i;
//             break;
//         }else continue
//     }
//     list.style.left = num * -590 + 'px';
//     list.style.transition = 'none' ;
//     // for(let j = 0 ; j < length ; j++){
//     //     btn.children[j].
//     // }
//     console.log(e.target.children)
// })
//



//右侧轮播图
let right = document.querySelector('.nexts');
let left = document.querySelector('.prevs');
let lists = document.querySelector('.slider_wrappers')
let boss = document.querySelector('.slider')
let n = lists.children.length
let time = null
let number = 0
let flags = true
// 设置 对应状态函数
function get(){
    for(let i=0;i<n;i++){
        if(number == lists.children[i].dataset.index){
            //清除所有状态
            for(let j=0;j<n;j++){
                if(j==0){
                    lists.children[j].className = 'slider_item first'
                }
                if(j==1){
                    lists.children[j].className = 'slider_item second'
                }
                if(j==2){
                    lists.children[j].className = 'slider_item third'
                }
            }
            //给对应状态加类名
            if (number === 0){
                lists.children[i].className = 'slider_item first active'
            }
            if (number === 1){
                lists.children[i].className = 'slider_item second active'
            }
            if (number === 2){
                lists.children[i].className = 'slider_item third active'
            }
        } else continue
    }
}
//右移函数
function turnRight(){
    if(!flags) return
    number++;
    get()
    //处理特殊状态
    if (number === 3){
        lists.children[number-1].className = 'slider_item third'
        number = 0
        lists.children[number].className = 'slider_item first active'
    }
    flags = false
    setTimeout(() =>{
        flags = true
    },2000)
}
time = setInterval(autoPlay,3000)
//自动轮播
function autoPlay(){
    turnRight()
}

//右按钮 点击
right.addEventListener('click',function(){
    turnRight();
})
//左按钮 点击
left.addEventListener('click',function(){
    //节流锁
    if(!flags) return
    number--;
    if(number === -1){
        lists.children[number+1].className = 'slider_item first'
        number = 2
        lists.children[number].className = 'slider_item third active'
    }
    get()
    flags = false
    setTimeout(() =>{
        flags = true
    },2000)
})
boss.addEventListener('mouseover',() => {
    clearInterval(time)
})
boss.addEventListener('mouseout',() => {
    time = setInterval(autoPlay,3000)
})
 

//京东秒杀倒计时
let hour = document.querySelector('.hour')
let minute = document.querySelector('.min')
let second = document.querySelector('.seconds')
//管理员输入设置时间
let inputTime = new Date('2022-8-15 00:00:00')
countDown()
setInterval(countDown,1000)
//倒计时函数
function countDown(){
    let nowTime = new Date()
    //转化为总秒数
    let time = (inputTime - nowTime) / 1000 
    let h = parseInt(time / 60 / 60) //时
    h = h < 10 ? '0' + h : h
    hour.innerHTML = h
    let m = parseInt(time / 60 % 60) //分
    m = m < 10 ? '0' + m : m
    minute.innerHTML = m
    let s = parseInt(time % 60) //秒
    s = s < 10 ? '0' + s : s
    second.innerHTML = s 
}


// 侧边栏
let elevator = document.querySelector('.elevator')
let apps = document.querySelector('#apps')
//监听页面滚动 设置类
window.addEventListener('scroll',function(){
    //console.log(this.window.scrollY)
    if(this.window.scrollY >= 800){
        elevator.className = 'elevator elevator_fix';
    }
    else elevator.className = 'elevator';
})

//下拉出现固定导航栏
let searchs = document.querySelector('#searchs')

window.addEventListener('scroll',function(){
    if(this.window.scrollY >= 800){
        searchs.className = 'search-fix'
    }else {
        searchs.className = ''
    }
})

//点击顶部跳回顶部
    //平滑滚到顶部做法：
    //总距离、总时间、使用循环器不断滚动、到达顶部停止计时器
    /*把总距离分成若干段
        然后先瞬间移动到某段，停顿一会，然后再瞬间移动到下一段
        这就相等于平滑移动*/
let tops = document.querySelector('.elevator_totop')
tops.addEventListener('click',function(){
    //瞬间滚动
    //page.scrollTop(0);
    let $page = $('html,body')
    let distance = $('html').scrollTop()+$('body').scrollTop();; //得到滚动的总距离
    let time = 600  //总时间
    let intervalTime = 10  //停顿时间
    let itemDistance = distance/(time/intervalTime)  //每一个小单元移动的距离     运动次数：time/intervalTime 
    let intervalId = setInterval(function(){  //不断滚动
        distance = distance-itemDistance
        $page.scrollTop(distance)   //滚到distance的位置
        if(distance<=0)
            clearInterval(intervalId) //停止定时器
    },intervalTime)
})




